<template>
  <div class="header">
    <!-- 短信 -->
    <van-field v-model="tel" type="tel" label="手机号" class="phone" />
    <van-field
      v-model="sms"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      class="mail"
    >
      <template #button>
        <van-button size="small" type="primary" class="send"
          >发送验证码</van-button
        >
      </template>
    </van-field>
    <button class="skin">跳过</button>
    <router-link to="Select">
        <button class="next">下一页</button>
    </router-link>
    <div class="button">登录/注册</div>
  </div>
</template>


<style lang="less" scoped>
.header {
  .phone {
    margin-top: 100px;
    width: 400px;
    height: 50px;
    margin-left: 400px;
    border: 1px solid #e3e7ed;
  }
  .mail {
    margin-top: 30px;
    width: 400px;
    height: 50px;
    margin-left: 400px;
    border: 1px solid #e3e7ed;
    .send {
      background-color: #1989fa;
    }
  }
  .skin {
    margin-top: 10px;
    width: 100px;
    height: 30px;
    margin-left: 400px;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: #1989fa;
    color: #fff;
  }
  .next {
    margin-top: 10px;
    border-radius: 10px;
    width: 100px;
    height: 30px;
    margin-left: 200px;
    border: 1px solid transparent;
    background-color: #1989fa;
    color: #fff;
  }
  .button {
    text-align: center;
    margin-top: 30px;
    width: 300px;
    height: 45px;
    margin-left: 435px;
    background-color: #1989fa;
    border: 1px solid #e3e7ed;
    border-radius: 30px;
    color: #fff;
    line-height: 45px;
  }
}
</style>



<script>
export default {
  name: "Mail",
  data() {
    return {
      tel: "",
      sms: "",
    };
  },
  methods: {
    onChange(event) {
      // event.detail 为当前输入的值
      console.log(event.detail);
    },
  },
};
</script>